#CSS

层叠样式表（Cascading Style Sheets）是一种用于描述HTML或XML(包括SVG、XHTML等)文档样式的配置。CSS 的基本格式如下：

选择器 {
    样式名: 样式值;
}

选择器 决定哪些元素受影响，可以设为 h1、h2、p 等。
样式名 和 样式值 决定样式，例如 color:red 表示颜色为红色。

在 HTML 中添加 CSS 的方式有三种：

内联样式 - 在 HTML 元素中添加 style 属性，内容为 CSS 样式
内部样式 - 在 <head> 元素中添加 <style> 元素，内容为 CSS 样式
外部样式 - 在 <head> 元素中添加 <link> 元素，加载 CSS 文件

#内联样式

CSS 内联样式通过 HTML 元素的 style 属性将样式应用于单个 HTML 元素。

内联样式应用于所在的元素，因此不需要选择器

<p> 
    这是一个段落，它
    <span style="color:red">五</span>
    <span style="color:yellow">颜</span>
    <span style="color:blue">六</span>
    <span style="color:green">色</span>
</p>

CSS 内联样式
 
    这是一个段落，它
    五
    颜
    六
    色

#内部样式

CSS 内部样式通过 <style> 标签将样式应用于单个 HTML 文档。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="utf-8"/>
        <style>
            h1 {
                color: red;
            }

            p {
                color: green;
            }
        </style>
    </head>

    <body>
        <h1>这是标题</h1>
        <p>这是段落</p>
    </body>
</html>

CSS 内部样式

        红色的标题
        绿色的段落

#外部样式

CSS 内部样式通过 <link> 标签将外部的 CSS 文件应用于单个 HTML 文档。

<link rel="stylesheet" href="CSS 文件的链接"/>

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://xplanc.org/view/view.css"/>
    </head>

    <body>
        <p class="view-text-miku">view-text-miku</p>
        <p class="view-text-red">view-text-red</p>
        <p class="view-text-pink">view-text-pink</p>
        <p class="view-text-purple">view-text-purple</p>
        <p class="view-text-indigo">view-text-indigo</p>
        <p class="view-text-blue">view-text-blue</p>
        <p class="view-text-cyan">view-text-cyan</p>
        <p class="view-text-teal">view-text-teal</p>
        <p class="view-text-green">view-text-green</p>
        <p class="view-text-yellow">view-text-yellow</p>
        <p class="view-text-orange">view-text-orange</p>
    </body>
</html>

CSS 外部样式

        view-text-miku
        view-text-red
        view-text-pink
        view-text-purple
        view-text-indigo
        view-text-blue
        view-text-cyan
        view-text-teal
        view-text-green
        view-text-yellow
        view-text-orange

创建于 2025/5/14 19:00:48

更新于 2025/5/14 20:25:19

HTML / 基础 / 综合示例

通识基础 / Windows / 安装软件